<template>
        <div class="jx-big">
            <div>
                <div class="jx-info">
                    <h3 class="fl">消息通知</h3>
                </div>
                <div class='table'>
                     <!-- <table cellspacing="0" cellpadding='0' class='tab' style='position:relative'>
                        <tr>
                            <th width='500'>消息名称</th>
                            <th width='100'>发布时间 </th>
                            <th width='250'>操作 </th>
                        </tr>
                        <tr  @click='cheek(item)' v-for='(item ,index) in tableData' :key="index">
                            <td style="width:500px">
                                <div :class="item.down? 'td-content' : 'td-contentd'">
                                    {{item.count}}
                                 <div  class='classNamelist' >
                                    <span class="className" v-for='(item ,index) in item.ClassList' :key="index">{{item.name}}</span>
                                </div>
                                </div>
                            </td>
                            <td>{{item.name}} </td>
                            <td style='position:relative'>
                                <span class='handle' @click.stop='repeat(item.id, item.count)'>修改</span>
                                <span class='delete' @click.stop="deletFn(item.id)" >删除</span>
                            </td>
                            <i :class="item.down? 'ico' : 'icon'" class='el-icon-arrow-right' ></i>
                        </tr>
                    </table> -->
                    <ul class="title">
                        <li style="width:540px; text-align:left">消息名称</li>
                        <li style="width:90px;">发布时间</li>
                        <li style="width:200px;">发布人</li>
                    </ul>
                    <ul class="title-content" @click='cheek(item)'  v-for='(item ,index) in tableData' :key="index" style="position:relative" :class="item.show? 'down-content' : 'top-content'"   >
                        <li style="width:540px;" >
                             {{item.content}}
                        </li>
                        <li style="width:90px; text-align:center">{{item.time}}</li>
                        <li style="width:200px; text-align:center">{{item.userName}}</li>
                        <i :class="item.show? 'ico' : 'icon'" class='el-icon-arrow-right' ></i>

                    </ul>
                    <ul v-if="tableData.length==0" class="empty">
                         <img src='../../../assets/images/empty.png'/>
                         <p>暂无数据</p>
                    </ul>
                      <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pagesize"
                        layout="total, prev, pager, next, jumper"
                        :total="totalCount"
                        style="clear:both"
                    ></el-pagination>
                </div>

            </div>

     </div>


</template>

<script>
    import NotificationNav from '@/components/NotificationNav.vue'
    export default {
        props: ['websockMsg'],
        components: {
            NotificationNav
        },
        data () {
            return {
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                tableData: [],
                id:'',
                // tableData: [{
                //     id: '12987122',
                //     down:false,
                //     name: '王小0虎',
                //     amount1: '234',
                //     amount2: '3.2',
                //     ClassList:[
                //         { name:'大数据发班据发班级'},
                //         { name:'大数据发班据发班级'},
                //         { name:'大数据班级'},
                //         { name:'大数据发班据级'},
                //          { name:'大数据发班据发班级'},
                //         { name:'大数据发班据发班级'},
                //         { name:'大数据班级'},
                //         { name:'大数据发班据级'},
                //     ],
                //     count:'代码的关键点在于border-collapse:collapse; 和 border:solid 1px Black;。对于padding的定义大家都比较熟悉了，这里主要讲一下的是border-collapse中的collapse和separate值，定义为collapse时，他们的边框会重叠在一起，定义为separate时单元格边框之间会有间隙。不定义时默认为separate。 separate情况下的效 '
                //     },
                //     {
                //     id: '12987122',
                //     down:true,
                //     name: '王小0虎',
                //     amount1: '234',
                //      ClassList:[
                //         { name:'大数据发班据发班级'},
                //         { name:'大数据发班据发班级'},
                //     ],
                //     amount2: '3.2',
                //     count:'大数据发班据发班级大数据发班据发班级大数据发班据发班级大数据发班据发班级'
                //     }
                // ]
                // 通知消息
                websock: null,
                over: null,
            }
        },
        created () {
            let self = this
             // 初始化socket
            // self.initWebSocket()
            self.id = self.$route.query.id
            self.init()
            // self.handdleMsg()
        },
        destroyed: function() {
            //页面销毁时关闭长连接
            // this.over()
        },

        methods: {
            handdleMsg(msg) {
                let self = this;
                self.global.ws.onmessage = function(res) {
                    self.init()
                }
            },
            initWebSocket() {
            //初始化weosocket
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/global"
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close()
                }
            },
            websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e) {
                //数据接收
                const redata = JSON.parse(e.data);
                let self = this
                this.init();
                // if (redata.type == 11) {
                //     //新增消息

                //     self.init()
                // } else if (redata.type == 12) {
                //     //删除消息
                //     self.init()
                // }
            },
            init(){
                let self = this
                self.$http.get('/tes/message/student?pageNum='+self.currentPage+'&pagesize='+self.pagesize).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.tableData = res.data.content
                       self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //展开或者收齐
            cheek(item){
               item.show =!item.show
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
        },
        watch: {
            'websockMsg': {
                handler: function(newval , oldval) {
                    let self = this
                   // console.log(newval)
                    if(newval.type == 11){
                        //添加数据
                        self.init()
                    }else if (newval.type == 12) {
                        //删除消息
                        self.init()
                }
                },
                deep: true
            }
        }
    }
</script>
<style scoped>
   .el-textarea{
       width: 64%;
       height: 160px;
   }
   .el-select>>>.el-input__inner{
       width: 193px;
   }
   .el-form-item__error{
       left: 108px;
   }
</style>

<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 33px;
    padding-top: 20px;
    padding-right: 19px;
        .jx-info{
            overflow: hidden;
            .jx-info>h3{
                height: 32px;
                line-height: 32px;
                font-size: $fs16
            }
        }
        .table{
            clear: both;
            margin: 40px 0;
              .title>li{
                float: left;
                border-bottom:1px solid #e8e8e8;
                text-align:center;
                height: 40px;
                line-height:40px;
                color:#474747;
                }
            .title-content{
                clear: both;
                float: left;
                border-bottom:1px solid #e8e8e8;
                height: 30px;
            }
            .empty{
                padding:100px 0;
                text-align:center;
                .icon-zanwushuju{
                    font-size: 100px;
                    color: #474747
                }
                &>p{
                    padding: 15px 0;
                }
            }
            .title-content>li{
                float: left;
                line-height:30px;
            }
            .top-content{
                height: 27px;
                overflow: hidden;
                transition: height .3s;
                line-height:28px;
                padding:10px 0;
            }
            .down-content{
                height: auto;
                transition: height .3s;
                line-height:28px;
                padding: 10px 0;
            }
            .icon{
                position:absolute;
                right:33px;
                transform:rotate(90deg);
                transition: transform .3s;
                line-height:30px;
                display:inline-block;
                cursor: pointer;
            }
            .ico{
                position:absolute;
                right:33px;
                line-height:30px;
                display:inline-block;
                transform:rotate(0deg);
                transition: transform .3s;
                cursor: pointer;
            }
            .handle{
                    position: absolute;
                    left: 50px;
                    z-index: 200;
                    display: inline-block;
                    width: 50px;
                    height: 30px;
                    margin-top: -5px;
                    color: $btn-blue;
                    cursor: pointer;
                }
            .delete{
                position: absolute;
                z-index: 200;
                display: inline-block;
                width: 50px;
                height: 30px;
                margin-top: -5px;
                color: $btn-blue;
                cursor: pointer;
            }
            .classNamelist{
                clear: both;
                padding-top:10px;
                width: 835px;
                 .className{
                    border-radius: 20px;
                    border: 1px solid #727272;
                    margin-right: 10px;
                    padding: 0px 8px;
                    margin-bottom: 7px;
                    display: inline-block;
                    font-size: 12px
                }
            }

        }
}
</style>
